<template>
  <div id="right">


    <div class="top">
      <div class="title">
        <title-bar>
          <template #img><img src="../../assets/images/新出库.png" alt="" class="img" /></template> <template
            #header>出库统计</template><template #subhead>Outbound Inventory Stats</template>
        </title-bar>
      </div>
      <div class="container">
        <Top></Top>
      </div>
    </div>


    <div class="center">
      <div class="title">
        <title-bar>
          <template #img><img src="../../assets/images/监控.png" alt="" class="img" /></template> <template
            #header>注册数量</template><template #subhead>Registration Count</template>
        </title-bar>
      </div>
      <div class="container">
        <waybillState></waybillState>
      </div>
    </div>


    <div class="bottom">
      <div class="title">
        <title-bar>
          <template #img><img src="../../assets/images/城市.png" alt="" class="img" /></template> <template
            #header>合作伙伴</template><template #subhead>Partner</template>
        </title-bar>
      </div>
      <mainCities></mainCities>
    </div>


  </div>
</template>

<script setup lang="ts">
import mainCities from "./mainCities.vue";
import Top from "./monitor.vue"
import waybillState from "./waybillState.vue"
import titleBar from "../scatteredContainer/titleBar.vue";
</script>

<style scoped lang="scss">
#right {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  .center,
  .bottom {
    flex: 4;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .top {
    flex: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}

.title {
  height: 40px;
}

.container {
  flex: 1;
}
</style>